<!DOCTYPE html>
<html lang="zh-cn" >
<head>
    <title>集群监控</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<#include "../../../__ref_common.ftl" parse=true/>
    <style>
        .el-tooltip, .el-table .el-tooltip, .el-tooltip__rel {
            display: inline-block;
        }
        .elx-content .content-header .content-add-button {
            background: #47B2FB;
            width: 42px;
            height: 42px;
            text-align: center;
            float: right;
            display: none;
        }

        .pagination-container, .paginationCommon {
            text-align: right;
            margin: 10px 0;
        }
        .content-title {
            margin-left: 15px;
            color: rgb(71, 86, 105);
            padding-left: 8px;
            border-left: 2px solid rgb(71, 86, 105);
        }

        .content-header {
            height: 42px;
            background-color: #fff;
            line-height: 42px;
            font-size: 14px;
            color: #A2B0C4;
        }
        .form-content{
            height: 190px;
        }
        .el-button {
    		height: 30px;
    		width:auto;
    		border-radius: 4px;
    		padding: 0 5px;
		}
    </style>
</head>
<body>
<div id="main" >
    <elx-content :location-origin="origin"  @end-load="endLoad" @back-href="backHref" :src="src" :type="type" :list-title="'集群监控'" :create-title="'集群监控'">
        <div slot="content" id="content" class="layout" >
            <div id="stateLog">
            <el-form :inline="true"   class="demo-form-inline " >
                <el-form-item  label="BROKERIP" >
                    <el-input v-model="queryCond.brokerIp" placeholder="请填写BROKERIP"></el-input>
                </el-form-item>
                <!-- <el-form-item  label="BROKER编号" >
                    <el-input v-model="queryCond.brokerID" placeholder="请填写BROKER编号"></el-input>
                </el-form-item> -->
                <!-- <el-form-item  label="leader" >
                    <el-select v-model="queryCond.leader"  >
                        <el-option v-for="item in turnOverEnum" :label="item.label" :value="item.value"></el-option>
                    </el-select >
                </el-form-item>
                </el-form-item>  -->
                <el-form-item  label="存活状态" >
                    <el-select v-model="queryCond.alive"  >
                        <el-option v-for="item in stateEnum" :label="item.label" :value="item.value"></el-option>
                    </el-select >
                </el-form-item>
                <el-form-item class="button-group">
                    <el-button type="info" icon="search" @click.native="getTableData">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="logData" class="form-content" v-loading="loading" border style="width:100%; height:100%"   @row-dblclick="queryTaskLog">
                <el-table-column label="BROKER编号" property="brokerId" show-overflow-tooltip></el-table-column>
                <el-table-column label="BROKERIP" property="brokerIp" show-overflow-tooltip></el-table-column>
                <el-table-column label="leader" property="isLeader" :formatter="turnOverFormatter" show-overflow-tooltip></el-table-column>
                <el-table-column inline-template label="是否存活" property="isAlive">
                        <el-tag :type="row.isAlive=='0'?'danger':'success'"> <span v-html="stateFormatter(row)"></span> </el-tag>
                    </el-table-column>
                <el-table-column label="状态更新时间" property="statDate" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150px" align="center">
                    <template scope="scope">
                    	<el-tooltip class="item" effect="light" content="任务监控" placement="top">
                        	<el-button size="small"   @click="viewUnit(scope.row)"><i  class="uex-icon-monitor-config"></i> </el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" content="资源监控" placement="top">
                        	<el-button size="small"   @click="viewUnit(scope.row)"><i  class="uex-icon-data-monitoring"></i> </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            </div>
        </div>
        <elx-content>
<script type="text/javascript">
    var _contextPath = '${mvcPath}';
    var vm = new Vue({
        el: "#main",
        data: function () {
            return {
                origin: window.location.origin,
                formLabelWidth: '120px',
                logData: [],
                taskLogData:[],
                src:  '${mvcPath}/datastash/workshop/unit_monitor/unit_monitor_list',
                type: 'list',
                queryCond: {
                    brokerIp: '',
                    brokerID: '',
                    leader: '',
                    alive: ''
                },
                taskLogQueryCond: {
                    unitProcId:'',
                    unitCode: '',
                    batchNo: '',
                    isTurnover: '',
                    state: ''
                },
                turnOverEnum:[
                    {label:"是",value:"1"},
                    {label:"",value:"0"}
                ],
                stateEnum:[
                    {label:"是",value:"1"},
                    {label:"否",value:"0"}
                ],
                loading: false,
                stateLog:{
                    pageNum: 1,
                    pageSize: 5,
                    total: 0
                },
                stateTaskLog:{
                    pageNum: 1,
                    pageSize: 5,
                    total: 0
                },

            }
        },
        methods:{
        	getData: function(){
        		var _self = this;
        		$.ajax({
        			type: 'get',
        			url: '${mvcPath}/open/datastash/unit_monitor/clustermonitor',
        			async: true,
                    dataType: 'json',
                    success: function(data){
                    	_self.logData = data;
                    }
        		});
        	},
            getTableData: function () {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: '${mvcPath}/open/datastash/unit_monitor/querymonitor?brokerIp='+ _self.queryCond.brokerIp+ '&isAlive='+ _self.queryCond.alive,
                    async: true,
                    dataType: 'json',
                    success: function(data) {
                        _self.logData = data;
                       /*  _self.stateLog.total = data.totalElements; */
                    },
                    error: function(data) {

                    }
                });
            }, 
            queryTaskLog:function (row) {
                this.taskLogQueryCond.unitProcId="";
                this.taskLogQueryCond.unitProcId=row.unitProcId;
                this.getTaskLogData();
            },
            getTaskLogData: function () {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: '${mvcPath}/open/datastash/unit/taskstate/all?unitProcId='+ _self.taskLogQueryCond.unitProcId+'&unitCode='+ _self.taskLogQueryCond.unitCode+ '&batchNo='+ _self.taskLogQueryCond.batchNo+ '&isTurnover='+ _self.taskLogQueryCond.isTurnover+ '&state='+ _self.taskLogQueryCond.state+ '&pageNum='+(_self.stateTaskLog.pageNum-1)+'&pageSize='+_self.stateTaskLog.pageSize,
                    async: true,
                    dataType: 'json',
                    success: function(data) {
                        _self.taskLogData = data.content;
                        _self.stateTaskLog.total = data.totalElements;
                    },
                    error: function(data) {

                    }
                });
            },
            dateFormatter:function(val){
            	return moment(this.statDate).format('YYYY-MM-DD hh:mm:ss');
            },
            defineOnchange:function(){
                this.queryCond.dataDefineId="";
            },
            handleCurrentChange: function(val) {
                this.stateLog.pageNum = val;
                this.getTableData();
            },
            taskHandleCurrentChange: function(val) {
                this.stateTaskLog.pageNum = val;
                this.getTableData();
            },
            stateFormatter:function (val) {
                for(var i in this.stateEnum){
                    if( this.stateEnum[i].value==val.isAlive){
                        return this.stateEnum[i].label;
                    }
                }
            },
            turnOverFormatter:function (val) {
                for(var i in this.turnOverEnum){
                    if( this.turnOverEnum[i].value==val.isLeader){
                        return this.turnOverEnum[i].label;
                    }
                }
            },
             viewUnit:function(val) {
            	/* this.src='${mvcPath}/datastash/workshop/unit/log/'+val.unitProcId;
                this.type = "create"; */
            }, 
            endLoad: function(){
                this.src  ='${mvcPath}/datastash/workshop/unit/state';
            },
            backHref: function(){
                this.getTableData();
                this.type = "list";
            }
        },
        watch: {
        },
        created: function () {
        	this.getData();
        }
    })
</script>
</div>
</body>
</html>